<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
let guanLiGuiChengButtons = [
  { name: "PESESGD业务基准", event: "" },
  { name: "R&D业务规程", event: "" },
  { name: "R&D Information", event: "" },
  { name: "技术法规快讯(TRI)", event: "" },
];
let guanLianDBButtons = [
  { name: "输出管理合否判定", event: "" },
  { name: "技术标准书", event: "" },
  { name: "商品目录", event: "" },
  { name: "技术KNOWHOW集", event: "" },
];
let jiShuBiaoZhunButtons = [
  { name: "技术法规", event: "" },
  { name: "企业标准", event: "" },
  { name: "PCSS", event: "" },
  { name: "MIS", event: "" },
  { name: "DM-CI", event: "" },
  { name: "产品共通安全设计规格", event: "" },
];
let sheNeiJiZhunButtons = [
  {
    name: "换气设备",
    style: "border: 2px solid rgb(244, 69, 99);",
    buttonColor: "#CD5C5C",
    buttons: [
      { name: "CAB/F", event: "" },
      { name: "Mini Sirocco", event: "" },
      { name: "换气扇", event: "" },
      { name: "干手机", event: "" },
      { name: "ERV", event: "" },
      { name: "Air Curtain", event: "" },
      { name: "浴霸", event: "" },
      { name: "部材", event: "" },
      { name: "抽油烟机", event: "" },
    ],
  },
  {
    name: "家电",
    style: "border: 2px solid rgb(121, 177, 240);",
    buttonColor: "#3498DB",
    buttons: [
      { name: "空气净化器", event: "" },
      { name: "空间除菌脱臭机", event: "" },
      { name: "净水设备", event: "" },
      { name: "扇風機", event: "" },
      { name: "加湿機", event: "" },
    ],
  },
  {
    name: "共通",
    style: "border: 2px solid rgb(247, 238, 56);",
    buttonColor: "#F4D03F",
    buttons: [
      { name: "印刷电路板", event: "" },
      { name: "马达", event: "" },
      { name: "共通", event: "" },
      { name: "除湿单元", event: "" },
      { name: "调湿模块", event: "" },
    ],
  },
  {
    style: "border: none;",
    name: "",
    buttonColor: "#F0B27A",
    buttons: [
      { name: "制品规格", event: "" },
      { name: "试验规格", event: "" },
      { name: "设计基准", event: "" },
    ],
  },
];
let jianChaBiaoButtons = [
  { name: "H-PCSS", event: "" },
  { name: "技术法规 Check Sheet", event: "" },
  { name: "Quality Check Sheet", event: "" },
  { name: "Hard-software Development", event: "" },
  { name: "再发防止检查表", event: "" },
  { name: "产品环境评价检查表", event: "" },
];
let otButtons = [
  { name: "开发资料链接一览", event: "" },
  { name: "Q&A", event: "" },
];

const userName = ref("");
const managerFlag = ref("");

const router = useRouter();

onMounted(() => {
  // 获取传递的参数
  const router = useRouter();
  let user_name = router.currentRoute.value.query.userName;
  let manager_flag = router.currentRoute.value.query.manager;
  console.log("传递过来的参数是 ", user_name, manager_flag);
  userName.value = user_name;
  managerFlag.value = manager_flag;
});

const onClick = (btn) => {
  console.log(btn);
  let name = btn.name;
  router.push({
    path: "/standard/list",
    query: {
      docType: name,
      userName: userName.value,
      manager: managerFlag.value,
    },
  });
};
</script>
<template>
  <div
    style="
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 30px;
      background: rgb(248, 249, 249);
    "
  >
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: start;
        gap: 50px;
      "
    >
      <!-- 左 -->
      <div class="cell1" style="border: 2px solid rgb(40, 176, 240)">
        <div class="main-pane1">
          <div class="title1" style="background-color: rgb(40, 176, 240)">
            管理规程
          </div>
        </div>
        <div v-for="btn in guanLiGuiChengButtons" :key="btn.name">
          <el-button
            type="info"
            class="btn1"
            color="#3498DB"
            @click="onClick(btn)"
            >{{ btn.name }}</el-button
          >
        </div>
      </div>
      <div class="cell1" style="border: 2px solid rgb(241, 148, 138)">
        <div class="main-pane1">
          <div class="title1" style="background-color: rgb(241, 148, 138)">
            关联DB
          </div>
        </div>
        <div v-for="btn in guanLianDBButtons" :key="btn.name">
          <el-button
            type="info"
            class="btn1"
            color="#FFA07A"
            @click="onClick(btn)"
            >{{ btn.name }}</el-button
          >
        </div>
      </div>
      <div class="main-pane1">
        <el-button
          class="main-btn1"
          type="info"
          style="margin-top: 20px"
          color="#CACFD2"
          @click="onClick({ name: '废弃基准' })"
          >废弃基准</el-button
        >
      </div>
    </div>
    <!-- 中 -->
    <div>
      <!-- 中上 -->
      <div
        style="
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 40px;
        "
      >
        <div style="margin-left: 30px; margin-right: 30px">
          <div class="main-pane1">
            <div class="title3">技术标准</div>
          </div>
          <div class="pane2">
            <div v-for="btn in jiShuBiaoZhunButtons" :key="btn.name">
              <el-button
                type="info"
                class="btn1"
                color="#BB8FCE"
                @click="onClick(btn)"
                >{{ btn.name }}</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 中下 -->
      <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: start;
          align-items: center;
          margin: 30px;
          border: 2px solid rgb(161, 161, 161);
          border-radius: 5px;
          padding: 18px;
        "
      >
        <div class="vertical-text">社内基准</div>
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: start;
            gap: 25px;
          "
        >
          <div v-for="btngroup in sheNeiJiZhunButtons" :key="btngroup.name">
            <div style="margin-bottom: 10px">{{ btngroup.name }}</div>
            <div class="btn-group1" :style="btngroup.style">
              <div v-for="btn in btngroup.buttons" :key="btn.name">
                <el-button
                  type="info"
                  class="btn1"
                  :color="btngroup.buttonColor"
                  @click="onClick(btn)"
                  >{{ btn.name }}</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div>
      <!-- 右上 -->
      <div class="cell1" style="border: 2px solid rgb(43, 245, 93)">
        <div class="main-pane1">
          <div class="title1" style="background-color: rgb(43, 245, 93)">
            检查表
          </div>
        </div>
        <div v-for="btn in jianChaBiaoButtons" :key="btn.name">
          <el-button
            type="info"
            class="btn1"
            color="#2ECC71"
            @click="onClick(btn)"
            >{{ btn.name }}</el-button
          >
        </div>
      </div>
      <!-- 右下 -->
      <div class="cell2">
        <div v-for="btn in otButtons" :key="btn.name">
          <el-button
            type="info"
            class="btn1"
            color="#CACFD2"
            @click="onClick(btn)"
            >{{ btn.name }}</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 26px;
  margin-right: 20px;
}
.cell1 {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid black;
  /* background-color: aquamarine; */
  gap: 10px;
}
.cell2 {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  padding: 20px;
  /* background-color: aquamarine; */
  gap: 10px;
}
.btn1 {
  width: 200px;
}
.main-pane1 {
  position: relative;
}
.title1 {
  background-color: rgb(88, 178, 239);
  position: absolute;
  top: -36px;
  left: 28px;
  right: 28px;
  text-align: center;
  padding: 3px 0px 4px 0px;
  /* border: 1px solid black; */
}
.title3 {
  background-color: rgb(164, 168, 242);
  position: absolute;
  top: -16px;
  left: 18px;
  right: 18px;
  text-align: center;
  padding: 3px 0px 4px 0px;
  /* border: 1px solid black; */
}
.main-btn1 {
  position: absolute;
  top: -36px;
  left: 28px;
  right: 28px;
}
.main-btn3 {
  position: absolute;
  top: -16px;
  left: 0px;
  right: 0px;
}
.pane2 {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  /* background-color: aqua; */
  /* padding: 30px; */
  padding: 30px 0px 25px 0px;
}
.btn-group1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 15px;
  padding: 10px;
  border: 2px solid rgb(247, 238, 56);
  border-radius: 5px;
}
</style>
